<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Field Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="480"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // --- Style and Parameters ---
  const cx = canvas.width / 2;
  const cy = canvas.height / 2 - 30; // Shift canvas content up to make space for caption
  const a = 320; // Side length of the triangle in pixels
  const h = a * Math.sqrt(3) / 2;
  const circumradius = (2 / 3) * h;
  const inradius = (1 / 3) * h;
  
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';

  // --- Helper function to draw a curved arrow with a quadratic Bezier curve ---
  function drawCurvedArrow(ctx, startX, startY, endX, endY, cpX, cpY, arrowSize) {
    ctx.lineWidth = 1.5;
    // Draw the curve
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.quadraticCurveTo(cpX, cpY, endX, endY);
    ctx.stroke();

    // Calculate the angle for the arrowhead, tangent to the curve at the end
    const angle = Math.atan2(endY - cpY, endX - cpX);
    
    // Draw the arrowhead
    ctx.beginPath();
    ctx.moveTo(endX, endY);
    ctx.lineTo(endX - arrowSize * Math.cos(angle - Math.PI / 7), endY - arrowSize * Math.sin(angle - Math.PI / 7));
    ctx.moveTo(endX, endY);
    ctx.lineTo(endX - arrowSize * Math.cos(angle + Math.PI / 7), endY - arrowSize * Math.sin(angle + Math.PI / 7));
    ctx.stroke();
  }
  
  // --- Draw Main Triangle ---
  const pA = { x: cx, y: cy - circumradius };
  const pB = { x: cx - a / 2, y: cy + inradius };
  const pC = { x: cx + a / 2, y: cy + inradius };

  ctx.beginPath();
  ctx.moveTo(pA.x, pA.y);
  ctx.lineTo(pB.x, pB.y);
  ctx.lineTo(pC.x, pC.y);
  ctx.closePath();
  ctx.lineWidth = 2;
  ctx.stroke();

  // --- Draw Labels (A, B, C, a) ---
  ctx.font = '24px serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText('A', pA.x, pA.y - 18);
  ctx.fillText('B', pB.x - 20, pB.y + 5);
  ctx.fillText('C', pC.x + 20, pC.y + 5);
  
  ctx.font = 'italic 24px serif';
  ctx.fillText('a', (pA.x + pC.x) / 2 + 15, (pA.y + pC.y) / 2);

  // --- Draw Magnetic Field (B label and dots) ---
  ctx.font = 'bold 32px serif';
  ctx.fillText('B', cx, cy - 45);

  function drawDot(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, 2.5, 0, 2 * Math.PI);
    ctx.fill();
  }

  // Manually placed dots to match the source image's layout
  // Level 1 (Top)
  drawDot(cx, cy - 95);
  // Level 2
  drawDot(cx - 35, cy - 50);
  drawDot(cx + 35, cy - 50);
  // Level 3
  drawDot(cx - 70, cy);
  drawDot(cx, cy);
  drawDot(cx + 70, cy);
  // Level 4 (Bottom)
  drawDot(cx - 105, cy + 50);
  drawDot(cx - 35, cy + 50);
  drawDot(cx + 35, cy + 50);
  drawDot(cx + 105, cy + 50);

  // --- Draw Rotation Arrows ---
  const arrowSize = 12;
  // Arrow near A (top)
  drawCurvedArrow(ctx, pA.x - 25, pA.y, pA.x + 40, pA.y + 10, pA.x, pA.y - 45, arrowSize);
  // Arrow near B (left)
  drawCurvedArrow(ctx, pB.x - 20, pB.y + 35, pB.x + 20, pB.y - 20, pB.x - 55, pB.y, arrowSize);
  // Arrow near C (right)
  drawCurvedArrow(ctx, pC.x + 20, pC.y + 35, pC.x - 20, pC.y + 35, pC.x, pC.y + 60, arrowSize);


  // --- Draw Caption ---
  ctx.font = '24px "SimSun", "Songti SC", serif'; // Common Chinese fonts
  ctx.fillText('电图 3.1.1', cx, canvas.height - 30);
  
</script>
</body>
</html>